<!--  -->
<template>
<div class='app'>
    <div class="flex mb-30">
      <div class="btn-back" @click="routerGoTo('MemberIndex')">
        <i class="el-icon-back"></i> 返回
      </div>
      <div class="line"></div>
      <div class="name">学员详情</div>
    </div>

    <div class="flex flex-alignCenter mb-30" >
        <el-avatar :size='80' :src="userData.avatar" class="mr-20"></el-avatar>
        <div class="user-nickname" v-text="userData.nick_name"></div><div class="buttons">
            <button @click="routerGoTo('MemberProfiles')" type="button" class="el-button real-profile el-button--primary mr-20 ml-20"  > 
                <span>实名信息</span>
            </button>
            <a class="edit-profile el-link el-link--primary is-underline mr-20" @click="routerGoTo('MemberEdit')">
                <span class="el-link--inner"> 修改资料 </span>
            </a>
            <a class="edit-profile el-link el-link--primary is-underline mr-20" @click="routerGoTo('MemberCredit1')">
                <span class="el-link--inner">修改积分</span>
            </a>
            <a class="edit-profile el-link el-link--primary is-underline mr-20"  @click="routerGoTo('MemberTags')">
                <span class="el-link--inner">修改标签</span>
            </a>
            <a class="edit-profile el-link el-link--primary is-underline mr-20" @click="routerGoTo('MemberRemark')">
                <span class="el-link--inner">修改备注</span>
            </a>
        </div>
    </div>

    <div class="main_content">
        <div class="content_item" v-for="(value,key) in mainConTit" :key="key">
            
            <template v-if="key == '标签'">
               {{key + " : "}} <el-tag v-for="item in value" :key="item.name" v-text="item.name"></el-tag>
            </template>
           
            <template v-else >
                {{key}} : <span v-html="value"></span>
                <!-- {{key + " : " + value}} -->
            </template>
        </div>
        
    </div>
    
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    userData:[],
    mainConTit:{}
            
    
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    routerGoTo(val) {
      // console.log(this.$route.params.id);
      this.$router.push({
        
        name: val,
        params:{
          id:this.$route.params.id
        }
      });
    },
    async sendRequest(){
        await this.$request.get(`/member/${this.$route.params.id}/detail`).then(res=>{
            console.log(res);
            this.userData = res.data.data;
            this.mainConTit = {
                'ID' : this.userData.id,
                '手机号' : this.userData.mobile,
                '积分' : this.userData.credit1,
                'VIP' : this.userData.role?.name ? this.userData.role.name : "",
                'VIP过期时间' : this.userData.role_expired_at ? this.userData.role_expired_at : "",
                '一级邀请人' : this.userData.invitor ? this.userData.invitor : "",
                '学员邀请码' : this.userData.is_used_promo_code ? "已使用" : "未使用",
                '推广余额' : this.userData.invite_balance,
                '锁定登录' : this.userData.is_lock ? "是" : "否",
                'IP地址' : this.userData.register_ip,
                '注册区域' : this.userData.register_area,
                '标签' : this.userData.tags,
                '备注' : this.userData?.remark?.remark ? this.userData.remark.remark : "",
            }
        })  
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.sendRequest()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped lang='less'>
.app{
    padding: 30px;
    border-radius: 15px;
    background-color: #fff;
    .btn-back {
    &:hover {
      color: #3ca7fa;
      cursor: pointer;
    }
  }
  .user-nickname{
        font-size: 20px;
    font-weight: 600;
    color: #333;
  }
  .ml-20{
    margin-left: 20px;
  }
  .mr-20{
    margin-right: 20px;
  }
  .mb-30 {
    margin-bottom: 30px;
  }
  .line {
    width: 1px;
    height: 14px;
    background-color: #d8d8d8;
    margin-right: 15px;
    margin-left: 15px;
  }
  .flex {
    width: 100%;
    display: flex;
  }
  .flex-spaceCenter {
    justify-content: center;
  }
  .flex-spaceBetween {
    justify-content: space-between;
  }
  .flex-alignCenter{
    align-items: center;
  }
  div.main_content {
        border-top: 1px solid #f3f6f9;
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        padding: 30px 0;
    div.content_item {
        display: flex;
        flex-wrap: wrap;
        flex-basis: 20%;
        height: auto;
        min-height: 60px;
    }
}
}
</style>